<template>
  <div>
    <div class="top-panel">
      <el-card>
        <el-form :model="searchForm" label-width="70px" label-position="right">
          <el-row>
            <el-col :span="5">
              <el-form-item label="用户名">
                <el-input
                  class="password-input"
                  v-model="searchForm.usernameFuzzy"
                  clearable
                  placeholder="支持模糊搜索"
                  @keyup.enter="loadDataList"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" :style="{ paddingLeft: '10px' }">
              <el-button type="success" @click="loadDataList()"
                >查询
              </el-button>

              <el-button type="danger" @click="showEdit()"
                >新增处罚
              </el-button>

            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <el-card class="table-data-card">
      <template #header>
        <span>处罚信息列表</span>
      </template>
      <Table
        ref="tableInfoRef"
        :columns="columns"
        :fetch="loadDataList"
        :dataSource="tableData"
        :options="tableOptions"
        :extHeight="tableOptions.extHeight"
      >
        <template #slotStatus="{ index, row }">
          <div class="row-op-panel">
            <Badge showType="green" text="启用" v-if="row.status == 1"></Badge>
            <Badge showType="red" text="禁用" v-if="row.status == 0"></Badge>
          </div>
        </template>

        <template #actionName="{ index, row }">
          <div class="row-op-panel">
            <el-tag type="warning" v-if="row.action==0">警告</el-tag>
            <el-tag type="danger" v-if="row.action==1">封号</el-tag>
          </div>
        </template>
        <template #avatorStatus="{ index, row }">
          <div class="row-op-panel">
            <el-avatar :src="proxy.globalInfo.imageUrl+row.avatar" size="default" >
            </el-avatar>
          </div>
        </template>
      </Table>
    </el-card>
    <CouncelorEdit ref="userEditRef" @reload="loadDataList"></CouncelorEdit>
  </div>
</template>

<script setup>
import CouncelorEdit from "./ViolationEdit.vue";
import { getCurrentInstance, nextTick, ref } from "vue";
const { proxy } = getCurrentInstance();

const userInfo = ref(
  proxy.VueCookies.get("userInfo")||null);
const api = {
  loadDataList: "/violation/loadDataList4Admin",
  delInfo: "/counselor/delInfo",
  updateStatus: "/counselor/updateStatus",
};
const searchForm = ref({});
const tableData = ref({});
const tableOptions = ref({
  extHeight: 125,
});

const columns = [
  {
      label: "处罚编号",
      prop:"violationId",
      width: 150,
  },
 {
    label: "头像",
    scopedSlots: "avatorStatus",
    width: 150,
  },
  {
    label: "用户名",
    prop: "username",
    width: 150,
  },
  {
    label: "原因",
    prop: "reason",
  },
  {
    label: "处罚",
    prop: "action",
    scopedSlots:"actionName"
  },
  {
    label: "创建时间",
    prop: "createTime",
    width: 200,
  },

];

const tableInfoRef = ref();

const loadDataList = async () => {
  let params = {
    pageNo: tableData.value.pageNo,
    pageSize: tableData.value.pageSize,
    role:2,
  };
  Object.assign(params, searchForm.value);
  let result = await proxy.Request({
    url: api.loadDataList,
    params: params,
  });
  if (!result) {
    return;
  }
  Object.assign(tableData.value, result.data);
};

//删除
const delInfo = (data) => {
  proxy.Confirm(`确定要删除【${data.username}】吗？`, async () => {
    let result = await proxy.Request({
      url: api.delInfo,
      params: {
        counselorId: data.counselorId,
      },
    });
    if (!result) {
      return;
    }
    proxy.Message.success("操作成功");
    loadDataList();
  });
};


//启用禁用
const changeAccountStatus = (data) => {
  let status = data.status == 0 ? 1 : 0;
  let info = status == 0 ? "禁用" : "启用";
  proxy.Confirm(`确定要【${info}】【${data.realName}】吗？`, async () => {
    let result = await proxy.Request({
      url: api.updateStatus,
      params: {
        counselorId: data.counselorId,
        status: status,
      },
    });
    if (!result) {
      return;
    }
    proxy.Message.success("操作成功");
    loadDataList();
  });
};

const userEditRef = ref();
const showEdit = (data = {}) => {
  userEditRef.value.showEdit(Object.assign({}, data));
};

const userPasswordEditRef = ref();
const showPasswordEdit = (data = {}) => {
  userPasswordEditRef.value.showEdit(Object.assign({}, data));
};
</script>

<style lang="scss" scoped>
.detail-tree-panel {
  height: calc(100vh - 273px);
  overflow: auto;
  width: 100%;
}
</style>
